<template>
	<view class="box">
		<u-search placeholder="请输入课程名称" v-model="keyword"
		 @search='search'
		 @custom='search'></u-search>
		<view style="width: 100rpx;height: 50rpx;">
			
		</view>
		<view>
			<view class="demo-warter2" v-for="(item, index) in flowList" :key="index" @tap="toDetail(item)">
				<image :src="item.coverPath" mode="" class="course-image2"></image>
				<view class="course-list2">
					<view class="demo-title">
						{{item.seriesName}}
					</view>
					<view class="author2">
						<u-avatar :src="item.expertFace" size="36"></u-avatar>
						<view class="author-name">
							{{item.expertName}}
						</view>
					</view>
					<view class="desc-price">
						<view class="demo-person">
							{{item.courseWatchCount}}人看过
						</view>
						<view class="demo-price2" v-if="item.isCharge == '0'">
							免费
						</view>
						<view class="demo-price1" v-else-if="item.isCharge == '1'&&item.payStatus == 'UNPAID'">
							￥{{item.price}}
						</view>
						<view class="demo-price3" v-else>
							已购买
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="view-more">
			{{ page*rows < total ? "查看更多" : "没有更多了" }}
		</view>
	</view>
</template>

<script>
	import {
		API
	} from '../../config/myApi.js';
	export default{
		data(){
			return{
				keyword:'',
				page:1,
				rows:10,
				total:0,
				flowList:[]
			}
		},
		methods:{
			//跳转详情
			toDetail(item) {
				let obj = {
					id: item.id,
					payStatus: item.payStatus
				}
				uni.navigateTo({
					url: '/pages/course/courseDetail?val=' + JSON.stringify(obj)
				})
			},
			getCourseList(){
				const pram = {
					page: this.page,
					rows: this.rows,
					expertName:this.keyword,
				};
				API.getCourse(pram).then(res => {
					if (res.code == 200) {
						this.total = Number(res.result.total)
						this.flowList = this.flowList.concat(res.result.rows);
					} else {
						uni.showToast({
							title: '获取列表错误',
							icon: 'none'
						})
					}
				})
			},
			search(){
				this.page=1
				this.flowList=[]
				this.getCourseList()
			}
		},
		onReachBottom() {
				if (this.page * this.rows < this.total) {
					this.page = this.page + 1
					this.getCourseList();
				}
		}
	}
</script>

<style scoped lang="scss">
	.box{
		padding: 32rpx;
		box-sizing: border-box;
	}
	.view-more {
		text-align: center;
	}
	.serach_icon {
		margin-right: 32rpx;
	}
// 第二种样式
	.demo-warter2 {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 690rpx;
		height: 200rpx;
		margin: 0 auto 20rpx;
		padding: 16rpx;
		background: #FFFFFF;
		border-radius: 14rpx;
		image{
			      width: 133px;
			      height: 84px;
			      border-radius: 3px;
			      margin-right: 15px;
		}

}

		.course-list2 {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 100%;
			width: 350rpx;

			.demo-title {
				width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}

			.author2 {
				color: #8A8A8A;
				display: flex;

				.author-name {
					font-size: 20rpx;
					font-weight: 500;
					margin-left: 14rpx;
				}
			}
		}
		
		// 查看更多
		.view-more {
			// height: 48rpx;
			// line-height: 100rpx;
			padding-top: 40rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #C9C8C8;
			text-align: center;
		}
		
		.desc-price {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		.demo-price1,
		.demo-price2,
		.demo-price3 {
			font-size: 30rpx;
			margin-top: 5px;
			font-weight: bold;
		}
		
		.demo-price1 {
			color: $u-type-error;
		}
		
		.demo-price2 {
			color: #49AE9C;
		}
		
		.demo-price3 {
			color: #F69F39;
		}
		
		.demo-person {
			font-size: 18rpx;
			color: $u-tips-color;
			margin-top: 5px;
		}
</style>